import React  from "react";
import {Row,Col,Upload, Button,Form ,Input} from 'antd';
import { LoadingOutlined, PlusOutlined } from '@ant-design/icons';
import IconFont from "../../../../components/iconfont";
import {connect } from 'react-redux';
import Css from '../../../../assets/css/pc/member/personal/index.css';
import hoc from "./hoc";
import TitleComponent from "../title";
const personal = hoc((props)=>{
    const uploadButton = (
        <div>
            {props.loading ? <LoadingOutlined  /> : <PlusOutlined />}
            <div
                style={{
                    marginTop: 8,
                }}
            >
                修改头像
            </div>
        </div>
    );
    const inputEdit = (
        <Form
            form={props.formInput}
            name="horizontal_login"
            layout="inline"
            onFinish={props.formInputOnFinish}
            initialValues={{
                'username':props.useName ,
            }}
        >
            <Form.Item
                name="username"
                rules={[
                    {
                        required: true,
                        message: '请输入用户名',
                    },
                ]}
            >
                <Input  placeholder="请输入用户名"   />
            </Form.Item>
            <Form.Item >
                <Button
                    type="primary"
                    htmlType="submit"
                >
                    确认
                </Button>
                <Button
                    htmlType="button"
                    className={'ml10'}
                    onClick={props.inputCancel}
                >
                   取消
                </Button>
            </Form.Item>
        </Form>
    )
    const inputadmin = (
        <React.Fragment>
            {props.useName}
            <Button
                className={Css['personalBtn']+' ml10'}
                icon={<IconFont type="icon-gatmgrxiugai" />}
                onClick={props.isInputEditBtn}
            >
                修改
            </Button>
        </React.Fragment>
    )
    const passWordEdit = (
        <Form
            form={props.formPassWord}
            name="register"
            onFinish={props.passwordChenge}
        >
            <Form.Item
                name="oldPassWord"
                rules={[
                    {
                        required: true,
                        message: '请输入旧的密码',
                    },
                ]}
                // validateTrigger= 'onBlur'
            >
                <Input.Password placeholder={'旧的密码'} />
            </Form.Item>
            <Form.Item
                name="password"
                dependencies={['oldPassWord']}
                rules={[
                    {
                        required: true,
                        message: '请输入新密码',
                    },
                    ({ getFieldValue }) => ({
                        validator(_, value) {
                            let asd = value !== undefined && getFieldValue('oldPassWord') === value ;
                            if (asd) {
                                return Promise.reject(new Error('与旧密码相同'));
                            }
                            return Promise.resolve();
                        },
                    }),
                ]}
                // validateTrigger= 'onBlur'
            >
                <Input.Password placeholder={'新的密码'}/>
            </Form.Item>
            <Form.Item
                name="confirm"
                dependencies={['password']}
                rules={[
                    {
                        required: true,
                        message: '请再次输入密码',
                    },
                    ({ getFieldValue }) => ({
                        validator(_, value) {
                            if (!value || getFieldValue('password') === value) {
                                return Promise.resolve();
                            }
                            return Promise.reject(new Error('您输入的两个密码不匹配！'));
                        },
                    }),
                ]}
                // validateTrigger= 'onBlur'
            >
                <Input.Password placeholder={'确认密码'}/>
            </Form.Item>
            <Form.Item >
                <Button type="primary" htmlType="submit">
                    确认
                </Button>
                <Button type="button" className={'ml10'} onClick={props.passWordCancleBtn} >
                    取消
                </Button>
            </Form.Item>
        </Form>
    )
    return(
        <section className={Css['personal']} >
            <div className={Css['personalCen']}>
                <TitleComponent title={'个人设置'}/>
                <div className={Css['personalBox']}>
                    <Row gutter={30} className={Css['personalRow']}>
                        <Col span={4} className={Css['labelCol']}>用户头像</Col>
                        <Col span={12} >
                            <Upload
                                name="avatar"
                                listType="picture-card"
                                className="avatar-uploader"
                                showUploadList={false}
                                action= {`${window.base.config.baseUrlShop}user/myinfo/updateuser?token=${window.base.config.token}`}
                                beforeUpload={props.beforeUpload}
                                onChange={props.handleChange}
                            >
                                {props.imageUrl? (
                                    <img
                                        src={props.imageUrl}
                                        alt="avatar"
                                        style={{
                                            width: '100%',
                                        }}
                                    />
                                ) : (
                                    uploadButton
                                )}
                            </Upload>
                        </Col>
                    </Row>
                    <Row gutter={30}  className={Css['personalRow']}>
                        <Col span={4} className={Css['labelCol']}>用户id</Col>
                        <Col span={12}>{props.useId}</Col>
                    </Row>
                    <Row gutter={30}  className={Css['personalRow']}>
                        <Col span={4} className={Css['labelCol']}>用户名</Col>
                        <Col span={12}>
                            {
                                props.isInputEdit? inputadmin: inputEdit
                            }
                        </Col>
                    </Row>
                    <Row gutter={30}  className={Css['personalRow']}>
                        <Col span={4} className={Css['labelCol']}>Email</Col>
                        <Col span={12}>{props.useEmail}</Col>
                    </Row>
                    <Row gutter={30}  className={Css['personalRow']}>
                        <Col span={4} className={Css['labelCol']}>角色</Col>
                        <Col span={12}>{props.useRole}</Col>
                    </Row>
                    <Row gutter={30}  className={Css['personalRow']}>
                        <Col span={4} className={Css['labelCol']}>密码</Col>
                        <Col span={12}>
                            {
                                props.isPassWordEdit?
                                    passWordEdit
                                    :
                                    <Button
                                    className={Css['personalBtn']}
                                    icon={<IconFont type="icon-gatmgrxiugai" />}
                                    onClick={props.personalPassWordBtn}
                                >
                                    修改
                                </Button>
                            }
                        </Col>
                    </Row>
                    <Row gutter={30}  className={Css['personalRow']}>
                        <Col span={4} className={Css['labelCol']}>收货地址</Col>
                        <Col span={12} onClick={()=>{props.history.push(window.base.config.path+'address')}}>asd</Col>
                    </Row>
                </div>
            </div>
        </section>
    )
});

export default connect((state)=>{
    return{
        state:state
    }
})(personal)